<template>
  <div id="map-box" ref="JMap"></div>
</template>

<script>
import { reqPost } from 'global/axios';

export default {
  async mounted () {
    let res = await this.getMapData();
    if (res.status) {
      this.showSmallMap(res.result.result);
    }
  },

  methods: {
    async getMapData () {
      return reqPost({
        data: {
          searchValue: {
            river_name: '测试河|#|ne',
            solve_is: '处理中|#|in',
          },
          chooise: 'respon',
        },
        url: '/emergency/report/myreport',
      });
    },

    showSmallMap (arr) {
      let center = new qq.maps.LatLng(23.009912294150357, 113.12484741210938);
      let map = new qq.maps.Map(this.$refs.JMap, {
        center,
        zoom: 11,
        disableDoubleClickZoom: false,
      });
      arr.map(item => {
        let marker = new qq.maps.Marker({
          position: new qq.maps.LatLng(item.lat, item.lng),
          map,
        });
        let anchor = new qq.maps.Point(0, 39);
        let size = new qq.maps.Size(42, 68);
        let origin = new qq.maps.Point(0, 0);
        let markerIcon = new qq.maps.MarkerImage(
          '/static/img/weizhi.png',
          size,
          origin,
          anchor
        );
        marker.setIcon(markerIcon);
        let info = new qq.maps.InfoWindow({
          map,
        });
        qq.maps.event.addListener(marker, 'click', function () {
          info.open();
          info.setContent(
            `<div class='bigModal'>
              <table style='width: 300px;text-align:center' border='1'>
                <tr>
                  <th style='width: 80px'>河流名称</th>
                  <th>举报时间</th>
                  <th>举报地址</th>
                </tr>
                <tr>
                  <td>${item.river_name}</td>
                  <td>${item.report_time}</td>
                  <td>${item.address}</td>
                </tr>
              </table>
            </div>`
          );
          info.setPosition(new qq.maps.LatLng(item.lat, item.lng));
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
#map-box {
  flex: 1;
  width: 100%;
  min-height: 415px;
  border-radius: 5px;
}
</style>